<template>
  <el-container>
    <el-main>
      <el-form ref="editForm" :model="editForm"  label-width="100px" :rules="rules">
        <el-col :span="14">
            <el-row>
            <el-col :span="12">
                <el-form-item label="专题标签" prop="tagId" >
              <el-select v-model="tagName" placeholder="请选择类型" @change="change" value-key="id">
                <el-option v-for="item in tagList" :label="item.name" :value="item"  :key="item.id"/>
              </el-select>
               </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="页面名称" prop="name">
                <el-input v-model="editForm.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="背景图">
                <singleUpload :singleUploadTitle='singleUploadTitleTwo' :key="Math.random()" v-model="editForm.thumbnial"></singleUpload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7">
              <el-form-item label="背景颜色" prop="backgroundColor">
                <el-input v-model="editForm.backgroundColor" placeholder="例如#000000"></el-input>
              </el-form-item>
            </el-col>
            <colorPicker v-model="editForm.backgroundColor" style=" margin-left:20px;margin-top:5px;z-index: 999;"/>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="页面描述">
                <el-input v-model="editForm.description"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="分享广告语">
                <el-input v-model="editForm.shareDescr"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="分享广告图" prop="shareImage">
                <singleUpload :singleUploadTitle='singleUploadTitle' :key="Math.random()" v-model="editForm.shareImage"></singleUpload>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item class="addBotton">
            <el-button type="primary" :loading="loading" @click="editDesigner('editForm')">保存修改</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-main>
  </el-container>
</template>
<script>
  import { EventBus } from '@/api/eventBus'
  import singleUpload from '../../components/Upload/singleUpload'
  import {find,update} from '../../api/wxPage'
  import { list } from '../../api/tag'

  export default {
    name: 'designer-edit',
    data(){
      return{
        tagName:'',
        id: '',
        loading:false,
        tagList:[],
        singleUploadTitle:'500*400',
        singleUploadTitleTwo:'200*200',
        editForm:{
          id:'',
          pageType:1,
          tagId:'',
          thumbnial:'',
          name:'',
          description:'',
          backgroundColor:'',
          shareImage:"",
          shareDescr:""
        },
            rules:{
          name: [
            { required: true, message: '请输页面名称', trigger: 'blur' },
           
          ],
          tagId: [
            { required: true, message: '请选择专题标签', trigger: 'blur' },
           
          ],
          shareImage: [
            { required: true, message: '请输上传广告图', trigger: 'blur' },
           
          ],

      }
      }
    },
    watch:{ // 路由地址不变的情况下,如果id变化则重新获取数据
      $route (newVal, oldVal) {
          console.log(newVal);
        if (newVal.name=='designer-edit' && newVal.query.id!=this.id) {
          this.getData()
        }
      }
    },
    methods:{
      getData() {
        this.id = this.$route.query.id
        this.loading=false
        this.loadTag()
        find(this.id).then(response=>{
          this.tagName=response.data.wxPage.tagName
            this.editForm=response.data.wxPage
          if (!this.editForm.backgroundColor){
            this.editForm.backgroundColor=''
          }
          if (!this.editForm.tagId){
            this.editForm.tagId=0
          }else{
            this.editForm.tagId=Number(this.editForm.tagId)
          }

        })
      },
      change(e){
        this.tagName=e.name
        this.editForm.tagId=e.id
        console.log(this.editForm.tagId)
      },
      loadTag(){
        let params=new URLSearchParams()
        params.append("type",9)
        list(params).then(response=>{
          this.tagList=response.data.data
        })
      },
      editDesigner(editForm){
        this.$refs[editForm].validate((valid) => {
            if (valid){
              this.loading=true
              console.log(this.editForm)
              update(this.editForm).then(response=>{
                this.loading=false
                EventBus.$emit('designer-edit', response.data)
                this.$store.dispatch('tagsView/delView', this.$route).then(({visitedViews}) => {
                  this.$router.push({
                    path: '/designer/list'
                  })
                })// 关闭当前tab回到列表
              })
            }
        })
      }
    },
    created() {
      this.getData()
    },
    components:{singleUpload}
  }
</script>

<style scoped>


  /deep/ .m-colorPicker .box {
    width: 270px;
  }
</style>
